<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-action.html">
<link rel="import" href="../common/cr-collapsible.html">
<link rel="import" href="../common/cr-hash-observer.html">
<link rel="import" href="cr-issue-message.html">

<polymer-element name="cr-issue-messages" attributes="messages" on-message-show="{{ revealMessage }}">
    <template>
        <cr-hash-observer on-hash-changed="{{ hashChanged }}"></cr-hash-observer>
        <style>
            :host { display: block; }

            .show-messages-toolbar {
                margin: 0;
                margin-bottom: 1em;
                padding: 0;
            }

            .separator {
                padding: 0 5px 0 5px;
                flex-shrink: 0;
                -webkit-flex-shrink: 0;
            }
        </style>

        <cr-toolbar class="show-messages-toolbar">
            <template if="{{ olderMessages.length }}">
                <a is="cr-action" on-tap="{{ toggleOlderMessages }}">
                    <template if="{{ showOlderMessages }}">
                        Hide
                    </template>
                    <template if="{{ !showOlderMessages }}">
                        Show
                    </template>
                    {{ olderMessages.length }} older
                    {{ "message" | pluralize(olderMessages.length) }}
                </a>
                <template if="{{ generatedMessages.length }}">
                  <div class="separator">/</div>
                </template>
            </template>

            <template if="{{ generatedMessages.length }}">
                <a is="cr-action" on-tap="{{ toggleGeneratedMessages }}">
                    <template if="{{ showGeneratedMessages }}">
                        Hide
                    </template>
                    <template if="{{ !showGeneratedMessages }}">
                        Show
                    </template>
                    {{ generatedMessages.length }} generated
                    {{ "message" | pluralize(generatedMessages.length) }}
                </a>
            </template>
        </cr-toolbar>

        <div id="messages">
            <template if="{{ olderMessages.length }}">
                <cr-collapsible active="{{ showOlderMessages }}">
                    <template if="{{ showOlderMessages }}">
                        <template repeat="{{ message in olderMessages }}">
                            <cr-issue-message
                                id="message-{{ message.sequence }}"
                                message="{{ message }}"
                                selected="{{ message.sequence == selectionId }}"></cr-issue-message>
                        </template>
                    </template>
                </cr-collapsible>
            </template>
            <template repeat="{{ message in recentMessages }}">
                <cr-issue-message
                    id="message-{{ message.sequence }}"
                    message="{{ message }}"
                    selected="{{ message.sequence == selectionId }}"></cr-issue-message>
            </template>
        </div>
    </template>
    <script>
    (function() {
        var SELECTION_PREFIX = "#msg";
        var MAX_MESSAGES = 5;

        function filterGeneratedMessages(messages) {
            return messages.filter(function(message) {
                return !message.generated;
            });
        }

        Polymer({
            created: function() {
                this.messages = null;
                this.olderMessages = null;
                this.recentMessages = null;
                this.generatedMessages = null;
                this.selectionId = null;
                this.showOlderMessages = false;
                this.showGeneratedMessages = false;
            },
            showGeneratedMessagesChanged: function() {
                this.messagesChanged();
            },
            messagesChanged: function() {
                this.generatedMessages = this.messages.filter(function(message) {
                    return message.generated;
                });

                var userMessages = filterGeneratedMessages(this.messages);
                var index = Math.max(userMessages.length - MAX_MESSAGES, 0);
                var lastIndex = this.messages.findIndex(userMessages[index]);

                this.olderMessages = this.messages.to(lastIndex);
                this.recentMessages = this.messages.from(lastIndex);

                if (!this.showGeneratedMessages) {
                    this.olderMessages = filterGeneratedMessages(this.olderMessages);
                    this.recentMessages = filterGeneratedMessages(this.recentMessages);
                }

                var lastMessage = this.recentMessages.last();
                if (lastMessage)
                    lastMessage.active = true;
                this.hashChanged();
            },
            hashChanged: function() {
                if (!window.location.hash.startsWith(SELECTION_PREFIX))
                    return;
                var num = window.location.hash.replace(SELECTION_PREFIX, "");
                if (/^[0-9]+$/.test(num) && num > 0 && num <= this.messages.length) {
                    this.selectionId = num;
                    this.async(function() {
                        var message = this.$.messages.getElementById("message-" + this.selectionId);
                        if (message)
                            this.scrollMessageToVisibleIfNeeded(message);
                    });
                }
            },
            toggleOlderMessages: function() {
                this.showOlderMessages = !this.showOlderMessages;
            },
            toggleGeneratedMessages: function() {
                this.showGeneratedMessages = !this.showGeneratedMessages;
            },
            pluralize: function(text, count) {
                if (!count)
                    return "";
                if (count == 1)
                    return text;
                return text.pluralize();
            },
            revealMessage: function(event) {
                this.scrollMessageToVisibleIfNeeded(event.target);
            },
            scrollMessageToVisibleIfNeeded: function(message) {
                // If you click the header then scroll the message until you can read it. This is
                // racy with the <cr-collapsible> animation but it's the best we have
                // until we expose some events. We could listen for on-transitionend
                // but then expand/collapse all would make us do this for each item.
                this.async(function() {
                    message.scrollIntoViewIfNeeded();
                }, null, 350);
            },
        });
    })();
    </script>
</polymer-element>
